<template>
    <div class="drawerContainer">
        <el-button type="primary" class="addCollapse" @click="addVariable()">添加变量</el-button>
        <el-form :model="propJson" label-width="auto" style="width: 100%">
            <el-collapse>
                <el-collapse-item :name="index" v-for="(item, index) in propJson.commonParam">
                    <template #title>
                        <div class="collapseTitle">
                            <span>参数 {{(index + 1)}}  {{item.variableName}}</span>
                            <el-button type="danger" plain size="small" style="margin-left: 20px" @click.stop="deleteVariable(index)">删除</el-button>
                        </div>
                    </template>
                    <el-form-item label="参数名称">
                        <el-input v-model="item.variableName" style="width: 100%"/>
                    </el-form-item>
                    <el-form-item label="参数值">
                        <el-input v-model="item.variableValue" style="width: 100%">
                            <template #prepend>
                                <el-select v-model="item.variableType" placeholder="Select" style="width: 115px">
                                    <el-option label="字符串" value="String" />
                                    <el-option label="数组" value="Array" />
                                    <el-option label="对象" value="Object" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-collapse-item>
            </el-collapse>
        </el-form>

        <el-form-item label="全局设置左边距">
            <el-input v-model="propJson.leftPadding" style="width: 100%" placeholder="全局设置左边距" />
        </el-form-item>

        <el-form-item label="全局设置上边距">
            <el-input v-model="propJson.topPadding" style="width: 100%" placeholder="全局设置上边距" />
        </el-form-item>

        <el-form-item label="全局设置右边距">
            <el-input v-model="propJson.rightPadding" style="width: 100%" placeholder="全局设置右边距" />
        </el-form-item>

        <el-form-item label="全局设置下边距">
            <el-input v-model="propJson.bottomPadding" style="width: 100%" placeholder="全局设置右边距" />
        </el-form-item>

        <el-form-item label="是否注入全局Mixin">
            <el-radio-group v-model="propJson.isAddMixin">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
            </el-radio-group>
        </el-form-item>

        <span>全局创建初始化:</span>

        <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
            <el-button type="primary" class="addCollapse" size="small" @click="addCreatedAction()">添加全局初始化行为</el-button>
        </div>

        <CommonThirdServiceAction :actionList="propJson.createdAction" :commonParam="commonParam"/>
    </div>
</template>

<script>
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction";

export default {
    name: "GlobalComponentDrawer",
    props: ['commonParam'],
    components: {
        CommonThirdServiceAction
    },
    methods: {
        addVariable() {
            let variableInfo = {variableName: "", variableValue: "", variableType: "String"}
            this.propJson.commonParam.push(variableInfo)
        },
        deleteVariable(index) {
            // 删除数组中的数据
            this.propJson.commonParam.splice(index, 1);
        },
        addCreatedAction() {
            if (!this.propJson.createdAction) {
                this.propJson.createdAction = [{isAsyncAction: false}]
            }
            let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", apiType: "MSOA", apiPath: "",
                isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
            this.propJson.createdAction.push(variableInfo)
        }
    },
    computed: {
        propJson() {
            return this.$store.state.lowCodeDrawerJsonInfo;
        }
    }
}
</script>

<style scoped lang="less">

</style>